<template>
	<view class="qilin-tabbar qilin-wh-100">
		<Index v-if="currentPage === 'index'"></Index>
		<!-- 底部tabbar自定义导航栏 -->
		<view class="qilin-tabbar-box flex-row" :style="tabbarCustomStyle()">
			<view class="qilin-tabbar-box-item" @click="changeNav('index')">
				<view class="qilin-tabbar-box-item-image">
					<image v-if="currentPage === 'index'" src="@/static/images/tabbar/index_cur.png"></image>
					<image v-else src="@/static/images/tabbar/index.png"></image>
				</view>
				<view class="qilin-tabbar-box-item-text">首页</view>
			</view>
			<view class="qilin-tabbar-box-item" @click="changeNav('test')">
				<view class="qilin-tabbar-box-item-image">
					<image v-if="currentPage === 'test'" src="@/static/images/tabbar/shop_cur.png"></image>
					<image v-else src="@/static/images/tabbar/shop.png"></image>
				</view>
				<view class="qilin-tabbar-box-item-text">会员专区</view>
			</view>
			<view class="qilin-tabbar-box-item main">
				<view class="qilin-tabbar-box-item-image main">
					<image src="@/static/logo.png" mode="widthFix"></image>
				</view>
				<view class="qilin-tabbar-box-item-text">组件模板</view>
			</view>
			<view class="qilin-tabbar-box-item">
				<view class="qilin-tabbar-box-item-image">
					<image v-if="currentPage === 'news'" src="@/static/images/tabbar/order_cur.png"></image>
					<image v-else src="@/static/images/tabbar/order.png"></image>
				</view>
				<view class="qilin-tabbar-box-item-text">文章资讯</view>
			</view>
			<view class="qilin-tabbar-box-item">
				<view class="qilin-tabbar-box-item-image">
					<image v-if="currentPage === 'me'" src="@/static/images/tabbar/me_cur.png"></image>
					<image v-else src="@/static/images/tabbar/me.png"></image>
				</view>
				<view class="qilin-tabbar-box-item-text">个人中心</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue";
import {tabbarCustomStyle} from "@/utils/index.js";
import Index from "./index.vue"; //首页


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
let currentPage = ref("index"); //当前显示页面，默认首页	


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
const changeNav=(type)=>{
	currentPage.value = type;
}


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.qilin-tabbar{
	>.qilin-tabbar-box{
		align-items:center;
		justify-content:space-around;
		width:100%;
		background-color:#fff;
		padding:12upx 24upx;
		box-shadow:0 -1upx 6upx rgba(0, 0, 0, 0.1);
		position:fixed;
		bottom:0;
		>.qilin-tabbar-box-item{
			text-align:center;
			position:relative;
			&.main{
				padding-top:56upx;
			}
			>.qilin-tabbar-box-item-image{
				position:relative;
				>image{
					width:50upx;
					height:50upx;
				}
				&.main{
					width:100upx;
					height:100upx;
					position:absolute;
					border-radius:$border-radius-circle;
					left:0;
					right:0;
					top:-50upx;
					margin:auto;
					z-index:2;
					padding:0;
					line-height:140upx;
					background-color:#fff;
					text-align:center;
					box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08);
					>image{
						width:60upx;
						height:60upx;
					}
				}
			}
			>.qilin-tabbar-box-item-text{
				font-size:24upx;
			}
		}
	}
}
</style>
